import { useAppDispatch, useAppSelector } from "@/store/hooks";
import {
  changeCreate,
  changeParams,
  getChannelAsync,
} from "@/store/withdrawChannel/withdrawChannelSlice";
import { Button, Table } from "antd";
import type { TableProps } from "antd";
import type { ReactElement } from "react";
import { shallowEqual } from "react-redux";

export interface DataType {
  uuid: string;
  conf_id: number;
  channel: string
}

export default function MTable(): ReactElement<typeof Table, "table"> {
  const { params, table } = useAppSelector((state) => state.withdrawChannel, shallowEqual);
  const { config: { data: { data: { user_channel_list, wd_way_conf, wd_way_status } = {} } = {} } = {} } = useAppSelector(state => state.app, shallowEqual)
  const dispatch = useAppDispatch();
  const columns: TableProps<DataType>["columns"] = [
    {
      title: '渠道',
      dataIndex: 'channel',
      key: 'channel',
      align: 'center',
      render: text => user_channel_list?.find?.(i => i.value === text)?.label
    },
    {
      title: '提现平台',
      dataIndex: 'wd_way',
      key: 'wd_way',
      align: 'center',
      render: text => wd_way_conf?.find?.(i => i.value === text)?.label
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      render: text => wd_way_status?.find?.(i => i.value === text)?.label
    },
    {
      title: '操作',
      dataIndex: 'opt',
      key: 'opt',
      align: 'center',
      render: (_text, record) => {
        return <Button size="small" type="primary" ghost onClick={() => {
          dispatch(changeCreate({
            type: 'update',
            open: true,
            record
          }))
        }}>编辑</Button>
      }
    }
  ];
  return (
    <Table
      columns={columns}
      scroll={{ x: "max-content" }}
      bordered
      loading={table.status === "loading"}
      pagination={{
        total: table?.data?.data?.total,
        current: params?.page,
        pageSize: params?.page_size,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total: number, range: [number, number]): string =>
          `${range[0]}-${range[1]}条/共${total}条`,
        onChange: (page: number, pageSize: number): void => {
          dispatch(changeParams({ page, page_size: pageSize }));
          dispatch(
            getChannelAsync({
              ...params,
              page,
              page_size: pageSize,
            })
          );
        },
      }}
      dataSource={table?.data?.data?.page_data || []}
      size="small"
      rowKey="uuid"
    />
  );
}
